<template>
    <div class="editer-tool">
        <el-popover
                popper-class="editer-popper"
                placement="bottom"
                v-model="show">
            <div class="editer-tool-box">
                <div class="editer-tool-item" @click.capture.stop="addTxt">
                    <i class="iconfont iconbtn_text"></i>
                    <p>文字</p>
                </div>
                <div class="editer-tool-item" @click.capture.stop="addPic">
                    <i class="iconfont iconbtn_pic"></i>
                    <p>图片</p>
                </div>
                <div class="editer-tool-item" @click.capture.stop="addTitle">
                    <i class="iconfont iconbtn_title"></i>
                    <p>标题</p>
                </div>
            </div>
            <div class="editer-tool-btn" slot="reference">
                <i class="iconfont iconbtn_add"></i>
            </div>
        </el-popover>
    </div>
</template>

<script>
    export default {
        name: "EditerTool",
        props:{
            index:{
                type:Number,
                default:0,
            }
        },
        data(){
            return {
                show:false
            }
        },
        methods:{
            addTxt(){
                this.$emit('add',{index:this.index,type:'txt'});
                this.show = false;
            },
            addPic(){
                this.$emit('add',{index:this.index,type:'pic'});
                this.show = false;
            },
            addTitle(){
                this.$emit('add',{index:this.index,type:'title'});
                this.show = false;
            }
        }
    }
</script>

<style>
    .editer-popper {
        border-radius: 20px;
    }
</style>

<style scoped lang="scss">
    .editer-tool {
        .editer-tool-btn {
            width: 100%;
            text-align: center;
            color: #A8A8A9;
            cursor: pointer;
            margin-bottom: 10px;
            margin-top: 10px;

            i {
                font-size: 26px;
            }
        }

    }

    .editer-tool-box {
        display: flex;
        width: 320px;

        .editer-tool-item {
            margin: 0 8px;
            font-size: 14px;
            text-align: center;
            flex: 1;
            cursor: pointer;
            user-select: none;

            p {
                height: 16px;
                line-height: 16px;
                color: #000000;
            }

            i {
                font-size: 24px;
            }
        }
    }
</style>
